<style lang="scss" scoped>
@import "@/assets/css/variable";

.home {
  width: 100%;
  background-color: #e8f0fd;
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;

  .sweips {
    width: 100%;
    height: 16rem;
    .my-swipe  .van-swipe-item{
      color: #fff;
      font-size: 2rem;
      line-height: 15rem;
      text-align: center;
      // background-color: #39a9ed;
      width: 100%;
      height: 100%;
      .swipe-item {
        width: 100%;
        height: 100%;
        .van-image__img {
          width: 100%;
          height: 16rem;
        }
      }
    }
    .custom-indicator {
      width: 100%;
      position: absolute;
      padding: 2px 5px;
      font-size: 1.2rem;
      p {
        box-sizing: border-box;
        width: 100%;
        position: absolute;
        background-color: rgba($color: #000000, $alpha: 0.5);
        bottom: 0;
        left: 0;
        right: 0;

        line-height: 3rem;
        height: 3rem;
        text-align: center;
        // padding-left: 2px;
        // padding: 0 12px;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 设置行数 */
        -webkit-box-orient: vertical;
      }
    }
  }

  // .pics{
  // 	background-color: white;
  // 	padding: 8px 12px 0px 12px;
  // 	.picList{
  // float: left;
  // 		position: relative;
  // 		height: 160px;
  // // overflow: hidden
  // 		img{
  // 			width:100%;
  // 			height: 100%;
  // 		}
  // 		p{
  //             box-sizing: border-box;
  // 			position: absolute;
  // 			background-color: rgba($color: #000000, $alpha: 0.5);
  // 			bottom: 0;
  // 			left: 0;
  // 			right: 0;
  // 			line-height: 30px;
  // 			height: 30px;
  //             text-align: center;
  //   // padding-left: 2px;
  // 			// padding: 0 12px;
  // 			color: white;
  // 			overflow: hidden;
  // 			text-overflow: ellipsis;
  // 			display: -webkit-box;
  // 			-webkit-line-clamp:1; /* 设置行数 */
  // 			-webkit-box-orient:vertical;
  // 		}
  // 	}

  // }
  .indicators {
    display: flex;
    justify-content: center;
    height: 0.5rem;
    padding-top: 0.5rem;
    span {
      width: 1.2rem;
      height: 0.25rem;
      background-color: #b6cfeb;
      border-radius: 1.5px;
      margin: 2px 5px;
      &.active {
        background-color: $mainColor;
      }
    }
  }
  .notice {
    margin-top: 10px;
    padding: 10px 12px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tag {
      flex: 0 0 3.4rem;
      border: 1px solid $mainColor;
      border-radius: 5px;
      padding: 4px 5px;
      text-align: center;
      color: $mainColor;
    }
    .text {
      padding: 0 8px;
      color: #191f25;
      font-size: 1.4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* 设置行数 */
      -webkit-box-orient: vertical;
    }
  }
  .tabBox {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: white;
    padding: 5px;
    .tab {
      flex: 0 0 31.4%;
      padding: 3px;
      position: relative;
      img {
        width: 100%;
      }
      div {
        text-align: center;
        position: absolute;
        top: 2rem;
        width: 100%;
        font-size: 1.6rem;
        &.color1 {
          color: #166cf0;
        }
        &.color2 {
          color: #4ea5b8;
        }
        &.color3 {
          color: #af9143;
        }
        &.color4 {
          color: #5494c1;
        }
        &.color5 {
          color: #888;
        }
        &.color6 {
          color: #333;
        }
      }
    }
  }
  .hot {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 5px 12px;
    .title {
      margin-top: 4px;
      img {
        width: 73px;
      }
    }
    .list {
    }
  }
}
</style>
<template>
  <div class="home">
    <div class="sweips">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="height: 16rem; width: 100%"
        @change="onChange"
      >
        <van-swipe-item
          class="swipe-item"
          v-for="(v, i) in sweiperList"
          :key="i"
        >
          <!-- <img class="imgs" :src="v.img" /> -->
          <van-image height="16rem" width="100%" fit="fill" :src="v.img" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator" v-for="(v, i) in sweiperList" :key="i">
            <p v-show="n3 == i">{{ v.title }}</p>
          </div>
        </template>
      </van-swipe>
    </div>

    <!-- <div class="pics" >
			<div class="picList" v-for="(v,i) in sweiperList" :key="i">
				<img :src="v.img" v-show=" n == i" alt=""  @touchstart.capture="touchStart" @touchend.capture="touchEnd">
				<p>{{v.title}}</p>
			</div>
		</div> -->
    <div class="indicators">
      <span
        :class="n3 == i ? 'active' : ''"
        v-for="(v, i) in img"
        :key="i"
        @click="sweiperAuto(i)"
      ></span>
    </div>
    <div class="notice">
      <span class="tag">政策</span>
      <span
        v-for="(item, i) in infoList"
        :key="i"
        v-show="n3 == i"
        class="text"
        @click="handerXq(item)"
        >{{ item.title }}</span
      >
      <span @click="infoClick" class="icon"
        ><van-icon name="arrow" size="15" color="#707070"
      /></span>
    </div>

    <div class="tabBox">
      <div class="tab" @click="toView('/info')">
        <img src="../../assets/img/tab1.png" alt="" />
        <div class="color1">信息公开</div>
      </div>
      <div class="tab" @click="toView('/successfulcases')">
        <img src="../../assets/img/tab2.png" alt="" />
        <div class="color2">优秀案例</div>
      </div>
      <div class="tab" @click="toView('/policyPagep')">
        <img src="../../assets/img/tab3.png" alt="" />
        <div class="color3">政策解读</div>
      </div>
      <div class="tab">
        <img src="../../assets/img/tab4.png" alt="" />
        <div class="color4">意愿调查</div>
      </div>
      <div class="tab" @click="toView('/advicesuggest')">
        <img src="../../assets/img/tab5.png" alt="" />
        <div class="color5">咨询建议</div>
      </div>
      <div class="tab" @click="toView('/approval')">
        <img src="../../assets/img/tab6.png" alt="" />
        <div class="color6">申请流程</div>
      </div>
    </div>
    <div class="hot">
      <div class="title">
        <img src="../../assets/img/title1.png" alt="" />
      </div>
      <div
        class="list"
        v-for="(item, i) in sweiperList"
        :key="i"
        @click="sweiperClick(item)"
      >
        <info-list :renderList="item"></info-list>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { myMixins } from "@/assets/js/mixins.js";
import InfoList from "@/components/InfoList.vue";
export default {
  mixins: [myMixins],
  name: "home",
  components: {
    InfoList,
  },
  data() {
    return {
      dot: true,
      show: false,
      actions: [
        { name: "全部" },
        { name: "本星期" },
        { name: "本月度" },
        { name: "本季度" },
        { name: "本年度" },
      ],
      active:
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/af80e9c4-5cba-467f-bd56-078906c4c94a.svg",
      inactive:
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/aa629246-a1d4-4e0e-892d-be645bacf2f9.svg",
      // 政策数组
      infoList: [],
      userInfo: "",
      // 轮播图数据
      sweiperList: [],
      n: 0,
      img: [],
      timer: "",
      nubs: 0,
      infotimer: "",
      current: 0,
      n3: 0,
      // 手指滑动数据
      startX: 0,
      endX: 0,
    };
  },

  created() {
    // 获取轮播图信息
    this.figureList();
    // 获取置顶标题
    this.topTitle();
  },
  // 处理文本标签
  computed: {
    StickTitle() {
      return function (value) {
        let reg = /<\/?.+?\/?>/g;
        return value.replace(reg, "");
      };
    },
  },
  mounted() {
    // 轮播移动
    this.play();
    // 政策移动
    this.infoPlay();
  },
  methods: {
    // 手指触摸
    touchStart(e) {
      e.preventDefault(); // 阻止默认事件，滚动等
      this.startX = e.touches[0].clientX; // 记录滑动开始的位置
    },

    // 手指离开
    touchEnd(e) {
      e.preventDefault(); // 阻止默认事件
      this.endX = e.changedTouches[0].clientX; // 记录结束位置
      // 左滑
      if (this.startX - this.endX > 30) {
        clearInterval(this.timer); // 清除定时器
        if (this.n >= this.img.length - 1) return (this.n = 0);
        this.n++;
      }

      // 右滑
      if (this.startX - this.endX < -30) {
        clearInterval(this.timer); // 清除定时器
        if (this.n == 0) return (this.n = this.img.length - 1);
        this.n--;
      }
      //  console.log('touchEnd', this.endX);
      this.timer && this.play();
      clearInterval(this.infotimer);
      this.infotimer && this.infoPlay();
    },
    beforeDestroy() {
      clearInterval(this.timer);
      clearInterval(this.infotimer);
    },
    // 轮播图移动
    play() {
      this.timer = setInterval(this.autoPlay, 3000);
    },

    autoPlay() {
      this.n++;
      if (this.n == this.img.length) {
        this.n = 0;
      }
    },
    sweiperAuto(index) {
      clearInterval(this.timer);
      //   console.log(index);
      this.n = index;
    },

    // 政策
    infoPlay() {
      this.infotimer = setInterval(this.infoautoPlay, 3000);
    },
    infoautoPlay() {
      this.nubs++;
      if (this.nubs == this.infoList.length) {
        this.nubs = 0;
      }
    },
    // 重置政策轮播
    infoClick() {
      clearInterval(this.infotimer);
      this.nubs++;
      if (this.nubs == this.infoList.length) {
        this.nubs = 0;
      }
      this.infotimer && this.infoPlay();
      clearInterval(this.timer);
      this.timer && this.play();
    },
    handerXq(query) {
      //  console.log(query, 33333);
      this.$store.commit("setInfoback", query);
      this.$router.push("infoDetail");
    },

    // 请求轮播图信息
    figureList() {
      this.$request.QueryTopNews().then((res) => {
        let sweiperList = this.cloneLoop(res.result.records);
        // console.log(sweiperList === res.result.records);
        sweiperList.map((item) => {
          // 拼接地址
          item.img = this.$request.url(item.img);
          this.img.push(item.img);
        });
        this.sweiperList = sweiperList;
      });
    },

    onChange(index) {
      // console.log(index);
      this.n3 = index;
      this.current = index;
    },

    // 请求政策信息
    topTitle() {
      this.$request
        .InterpretationList({
          params: {
            pageNo: 1,
            pageSize: 10,
          },
        })
        .then((res) => {
          //   console.log(res.result.records, 'title');
          let popsdata = res.result.records;
          popsdata.map((item) => {
            if (item.filesUrl == null) return;
            item.img = this.$request.url(item.filesUrl[0]);
            return item.img;
          });
          this.$store.commit("policyback", popsdata);
          // const title = []
          // res.result.records.forEach(item => {
          // title.push(item.content)
          // });

          this.infoList = popsdata;
          //   console.log(this.infoList, 33333333);
        });
    },

    sweiperClick(value) {
      this.$store.commit("setInfoback", value);
      this.$router.push("/infoDetail");
    },
    // 深拷贝
    cloneLoop(x) {
      const root = [];

      // 栈
      const loopList = [
        {
          parent: root,
          key: undefined,
          data: x,
        },
      ];

      while (loopList.length) {
        // 深度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent;
        if (typeof key !== "undefined") {
          res = parent[key] = {};
        }

        for (let k in data) {
          if (data.hasOwnProperty(k)) {
            if (typeof data[k] === "object") {
              // 下一次循环
              loopList.push({
                parent: res,
                key: k,
                data: data[k],
              });
            } else {
              res[k] = data[k];
            }
          }
        }
      }

      return root;
    },

    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      // console.log(item.name)
    },
    TaskPage() {
      let params = {
        // avatar: this.form.avatar,
        // nickname: this.form.nickname,
        campus_id: this.userInfo.campus_id,
        status: 1,
      };
      this.$request.TaskPage(params).then((res) => {
        // Dialog({ message: '提示' });
        if (res.ret == 200) {
          this.infoList = res.data.data;
        }
        // else{
        // 	Dialog({ title:'系统提示', message: res.msg });
        // }
      });
    },
  },
};
</script>
